<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #ffffff;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .aui-searchbar {
            background: #ffffff;
        }

        .aui-searchbar-input {
            background: #ebeced
        }

        .selectBtn {
            text-align: center;
            font-size: 0.7rem
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
        }

        header,
        .aui-bar-nav {
            position: fixed;
            padding-top: 0px
        }

        [v-cloak] {
            display: none;
        }

        header {
            background: url('../../image/home_bg2.png') no-repeat bottom center !important;
            padding-bottom: 5rem;
            background-size: 100% 100% !important;
        }

        header .aui-tab {
            background: none
        }

        header .aui-tab-item.aui-active {
            color: #ffffff !important;
            border-bottom: 2px solid #ffffff !important;
            font-weight: 600;
        }

        header .aui-tab-item {
            color: #ffffff
        }

        .aui-bar-nav.aui-bar-light .aui-iconfont {
            color: #ffffff
        }

        .swiper-container {
            width: 100%;
            height: 2rem;
            position: relative;
            overflow: hidden;
        }

        .swiper-slide {
            text-align: center;
            font-size: 0.6rem;
            /* Center slide text vertically */
            color: #ffffff
        }

        .swiper-slide-active {
            border-bottom: 2px solid #ffffff;
            font-weight: 800;
        }

        #header_top .aui-pull-right {
            height: 2.25rem;
        }

        #header_top .aui-pull-right img {
            width: 0.8rem;
        }

        .test {
            position: fixed;
            height: 10rem;
            width: 120%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            background: -webkit-linear-gradient(red, blue);
            background: -o-linear-gradient(red, blue);
            background: -moz-linear-gradient(red, blue);
            background: linear-gradient(to right, #ff5b31, #fe2727);
        }
    </style>
</head>

<body>
    <div id="app">


        <header id="header_top" class="aui-bar aui-bar-nav aui-bar-light" style="">

            <a class="aui-pull-left" onclick="open_shopSearch_win()">
                <span class="aui-iconfont aui-icon-search"></span>
            </a>

            <div class="aui-title">

                <!--标签-->
                <div class="aui-tab" id="tab">
                    <div class="aui-tab-item aui-active">买赠区</div>
                    <div class="aui-tab-item">
                        <div></div>分销区</div>

                </div>

            </div>

            <a class="aui-pull-right" onclick="open_kf_chat_win()">
                <!-- <span class="aui-iconfont aui-icon-comment"></span> -->
                <img src="../../image/news.png" alt="">
            </a>

            <div class="h10">

            </div>
            <!--搜索-->

            <!--标签-->

            <div class="aui-content" style="width:100%;overflow: hidden;position: absolute; ">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" @click="setClassSub(index,item.cate_id)" v-for="(item,index) in navList" :data-id="item.cate_id">{{item.classname}}</div>
                    </div>
                </div>
            </div>
        </header>



    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
    var header_top = $api.byId('header_top');
    var header_topPos = $api.offset(header_top);


    function setClass(k) {
        if (k == 0) {
            api.openFrame({
                name: 'maizengqu',
                url: './home_zeng.html',
                rect: {
                    x: 0,
                    y: header_topPos.h - 30,
                    w: 'auto',
                    h: api.frameHeight - header_topPos.h + 30
                },
                pageParam: {
                    name: 'test'
                },
                bounces: false,
                bgColor: 'rgba(0,0,0,0)',
            });
            api.closeFrame({
                name: 'fenxiaoqu'
            });
        } else {
            api.openFrame({
                name: 'fenxiaoqu',
                url: './home_fenxiao.html',
                rect: {
                    x: 0,
                    y: header_topPos.h - 30,
                    w: 'auto',
                    h: api.frameHeight - header_topPos.h + 30
                },
                pageParam: {
                    name: 'test'
                },
                bounces: false,
                bgColor: 'rgba(0,0,0,0)',
            });
            api.closeFrame({
                name: 'maizengqu'
            });
        }

    }

    apiready = function() {

        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
                navList: []

            },
            created: function() {
                var $_this = this;
                setClass(0)
                $api.fixStatusBar(header_top);
                api.parseTapmode();

                api.ajax({
                    url: window.Url.Freegoodscate_index,
                    method: 'post',
                    data: {
                        values: {
                        }
                    }
                }, function(ret, err) {
                    if (ret) {

                        if (ret.re == 1) {
                            $_this.navList = ret.data.catelist;
                            $_this.$nextTick(function() {
                                $_this.setClassSub(0, '');
                                var swiper = new Swiper('.swiper-container', {
                                    slidesPerView: 7,
                                    spaceBetween: 10,
                                    slidesPerGroup: 1,
                                    loopFillGroupWithBlank: true
                                });
                            })
                        }

                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                })


            },
            mounted: function() {
                var $_this = this;
                tabNav();
            },
            methods: {
                setClassSub: function(k, cateId) {
                    $(".swiper-container .swiper-slide").removeClass("swiper-slide-active");
                    $(".swiper-container .swiper-slide").eq(k).addClass("swiper-slide-active");

                    setTimeout(function() {
                        api.execScript({
                            name: 'root',
                            frameName: 'maizengqu',
                            script: 'test(' + cateId + ');'
                        });
                    }, 500)

                    setTimeout(function() {
                        api.execScript({
                            name: 'root',
                            frameName: 'fenxiaoqu',
                            script: 'test1(' + cateId + ');'
                        });
                    }, 500)


                }

            }
        })

    };

    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }

    function doSearch() {
        var searchValue = document.getElementById("search-input").value;
        if (searchValue) {
            api.toast({
                msg: searchValue,
                duration: 2000,
                location: 'bottom'
            });

        }
    }

    function tabNav() {
        var tab = new auiTab({
            element: document.getElementById("tab"),
        }, function(ret) {
            if (ret.index == 1) {
                $("header").css({
                    "background": "url('../../image/home_bg2.png')  no-repeat bottom center !important",
                    "background-size": "50%"
                });
                api.closeWin({
                    name: 'fenxiaoqu'
                });

            } else if (ret.index == 2) {
                $("header").css({
                    "background": "#ffffff"
                });
                api.closeWin({
                    name: 'maizengqu'
                });
            }
            setClass(ret.index - 1)

        });
    }

    // 打开搜索窗口
    function open_shopSearch_win() {
        api.openWin({
            name: 'search_shop',
            url: '../two_frame/search_shop.html',
            pageParam: {
                name: 'test',
                searchType: 1,
                store_id: ''
            }
        });

    }



    // 打开客服聊天列表
    function open_kf_chat_win() {

        api.openWin({
            name: 'kf_list',
            url: '../four_frame/kf_list.html',
            pageParam: {
                name: 'test'
            }
        });

    }
</script>

</html>
